<template>
  <el-container>
    <el-aside width="auto">
      <LayoutAside :isCollapse="isCollapse" />
    </el-aside>
    <el-container style="height: 100vh; overflow: hidden">
      <el-header>
        <LayoutHeader
          :isCollapse="isCollapse"
          :asideToggle="asideToggle"
          :pageBarShow="pageBarShow"
          :pageBarToggle="pageBarToggle"
        />
        <!-- <transition name="slide-fade" mode="in-out"> -->
        <LayoutPageBar v-show="pageBarShow" />
        <!-- </transition> -->
      </el-header>
      <el-scrollbar>
        <el-main>
          <!-- <keep-alive :include="cachePages">
            <router-view v-if="isRouterAlive" v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in" appear>
                <component :is="Component" />
              </transition>
            </router-view>
          </keep-alive> -->

          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in" appear>
              <keep-alive :include="cachePages">
                <component v-if="isRouterAlive" :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-scrollbar>
    </el-container>
  </el-container>
</template>
<script>
import { ref, provide, inject, nextTick } from "vue";
import { useStore } from "vuex";
import LayoutAside from "./components/Aside/index.vue";
import LayoutHeader from "./components/Header.vue";
import LayoutPageBar from "./components/PageBar.vue";
export default {
  name: "App",
  components: {
    LayoutAside,
    LayoutHeader,
    LayoutPageBar,
  },
  setup() {
    const appCtx = inject("appCtx");
    // 侧边栏
    var isCollapse = ref(false);
    const asideToggle = () => {
      isCollapse.value = !isCollapse.value;
    };
    // 标签栏
    var pageBarShow = ref(true);
    const pageBarToggle = () => {
      pageBarShow.value = !pageBarShow.value;
    };

    const $store = useStore();
    let cachePages = $store.state.Layout.cachePages;

    let isRouterAlive = ref(true);
    const reload = () => {
      console.log("cachePages", cachePages);
      isRouterAlive.value = false;
      nextTick(function () {
        isRouterAlive.value = true;
      });
    };
    // console.log('appCtx',appCtx);
    provide("reload", reload);
    return {
      isCollapse,
      asideToggle,
      pageBarShow,
      pageBarToggle,
      cachePages,
      isRouterAlive,
    };
  },
};
</script>
<style lang="scss">
.el-aside {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  // box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
  color: $ThemeText;
  position: relative;
  z-index: 2;
}
.el-main {
  background: #ECEEF2;
}
.el-header {
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  height: auto !important;
  // position: relative;
  // z-index: 1;
}
// pageBar
.slide-fade-leave-active,
.slide-fade-enter-active {
  height: 33px;
  overflow: hidden;
  transition: all 0.2s;
}

.slide-fade-enter {
  height: 0px;
}

.slide-fade-leave-to {
  height: 0px;
}

// main
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
